<template>
	<view class="layui-form-item">
		<label class="layui-form-label" v-if="title">{{title}}</label>
		<view class="layui-input-block">
			<view class="selectGroups clear">
				<view class="fl">
					<singleSelect :list="provinceList" :value="provinceId" titleKey="name" valueKey="id" :showDefault="false" @change="changeData($event,'provinceId')"></singleSelect>
				</view>
				<view class="fl">
					<singleSelect :list="cityList" :value="cityId" titleKey="name" valueKey="id" :showDefault="false" @change="changeData($event,'cityId')"></singleSelect>
				</view>
				<view class="fl">
					<singleSelect :list="districtList" :name="name" :value="districtId" titleKey="name" valueKey="id" :showDefault="false"></singleSelect>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import kit from "../common/kit.js" ;
	export default {
		name : "city" ,
		props:{
			title : {
				type : String ,
				default : "省市区"
			},
			name : {
				type : String ,
				default : ""
			},
			value : {
				type : String ,
				default : ""
			},
			disabled : {
				type : Boolean ,
				default : false
			},
		},
		created : function(e){
			this.initData();
		},
		
		watch:{
			value : function(res){
				this.initData();
			},
		},
		
		data() {
			return {
				provinceList : [],
				cityList : [],
				districtList : [] ,
				provinceId : null ,
				cityId : null ,
				districtId : null 
			};
		},
		
		methods:{
			
			initData : function(res){
				this.districtId = this.value ;
				this.loadData();
			},
			
			loadData : function(res){
				var that = this ;
				var data = {
					provinceId : this.provinceId,
					cityId : this.cityId,
					districtId : this.districtId
				} ;
				kit.get("/api/city/findAllData",data,function(res){
					that.provinceList = res.provinceList ;	
					that.cityList = res.cityList ;	
					that.districtList = res.districtList ;
					that.provinceId = res.curProvince.id ;
					that.cityId = res.curCity.id ;
					that.districtId = res.curDistrict.id ;
				});
			},
			
			changeData :function(res , name){
				this[name] = res.value ;
				this.loadData();
			}
		}
	}
</script>

<style lang="scss">
.selectGroups{
	width: 100%;
	.fl{
		width: 32.66666666%;
		&+.fl{
			margin-left: 1%;	
		}
	}
}
</style>
